import 'package:cbec_app/components/base/base_interactive.dart';
import 'package:cbec_app/components/common/common_style.dart';
import 'package:cbec_app/utils/Tools.dart';
import 'package:flutter/material.dart';
import 'package:flutter_screenutil/flutter_screenutil.dart';

class FiltterPopup extends StatefulWidget {
  FiltterPopup({super.key});

  late List<Map<String, dynamic>> serverList = [
    {'label': '全部', 'selected': true},
    {'label': '有货', 'selected': false},
    {'label': '无货', 'selected': false}
  ];

  @override
  State<FiltterPopup> createState() => _FiltterPopupState();
}

class _FiltterPopupState extends State<FiltterPopup> {
  @override
  Widget build(BuildContext context) {
    return Container(
      alignment: Alignment.topRight,
      width: 375.w,
      color: Colors.black54,
      child: Container(
          width: 330.w,
          height: double.infinity,
          color: Colors.white,
          child: Column(
            mainAxisAlignment: MainAxisAlignment.spaceBetween,
            children: [
              Container(
                width: 330.w,
                child: Column(
                  crossAxisAlignment: CrossAxisAlignment.start,
                  children: [
                    Container(
                      padding: EdgeInsets.only(top: 55.w, left: 25.w),
                      child: Column(
                        crossAxisAlignment: CrossAxisAlignment.start,
                        children: [
                          Text("服务",
                              style: setTextStyle(13, FontWeight.normal,
                                  Tools.fromHex("#000000"))),
                          SizedBox(height: 10.h),
                          Wrap(
                            children: List.generate(widget.serverList.length,
                                (index) {
                              return choiseItem(index);
                            }),
                          ),
                          SizedBox(height: 20.w),
                          Text("价格区间",
                              style: setTextStyle(13, FontWeight.normal,
                                  Tools.fromHex("#000000"))),
                          SizedBox(height: 10.w),
                          Row(
                            children: [
                              Container(
                                width: 94.w,
                                height: 28.w,
                                decoration:
                                    border_radis(Tools.fromHex("#F9F9F9")),
                                child: TextFormField(
                                  textAlign: TextAlign.center,
                                  decoration: descript("最低价"),
                                ),
                              ),
                              SizedBox(width: 10.w),
                              Text("—"),
                              SizedBox(width: 10.w),
                              Container(
                                width: 94.w,
                                height: 28.w,
                                decoration:
                                    border_radis(Tools.fromHex("#F9F9F9")),
                                child: TextFormField(

                                  textAlign: TextAlign.center,
                                  decoration: descript("最高价"),
                                ),
                              ),
                            ],
                          ),
                        ],
                      ),
                    ),
                    Container(
                      margin: EdgeInsets.only(top: 20.w,bottom: 20.w),
                      color: Tools.fromHex("#F8F8F8"),
                      height: 10.h,
                    ),

                    Container(
                      padding: EdgeInsets.only(left: 25.w),
                      child: Column(
                        crossAxisAlignment: CrossAxisAlignment.start,
                        children: [
                          Text("品牌",
                              style: setTextStyle(13, FontWeight.normal,
                                  Tools.fromHex("#000000"))),
                          SizedBox(height: 10.h),
                          Wrap(
                            children: List.generate(widget.serverList.length,
                                (index) {
                              return choiseItem(index);
                            }),
                          ),
                        ],
                      ),
                    )
                  ],
                ),
              ),
              Container(
                decoration: top_gary_border,
                height: 60.h,
                padding: EdgeInsets.fromLTRB(25.w, 10.w, 25.w, 10.w),
                child: Row(
                  children: [
                    BaseInteractive(
                      onClick: () {},
                      childWidget: Container(
                        alignment: Alignment.center,
                        width: 140.w,
                        height: 40.w,
                        decoration: BoxDecoration(
                          border: Border.all(
                              color: Tools.fromHex("#F83F2D"), width: 1),
                          borderRadius: const BorderRadius.only(
                            topLeft: Radius.circular(20.0),
                            bottomLeft: Radius.circular(20.0),
                          ),
                        ),
                        child: Text("重置",
                            style: setTextStyle(
                                13, FontWeight.w300, Tools.fromHex("#F83F2D"))),
                      ),
                    ),
                    BaseInteractive(
                      onClick: () {
                        _overlayEntry.remove();
                      },
                      childWidget: Container(
                        alignment: Alignment.center,
                        width: 140.w,
                        height: 40.w,
                        decoration: BoxDecoration(
                          color: Tools.fromHex("#F83F2D"),
                          border: Border.all(
                              color: Tools.fromHex("#F83F2D"), width: 1),
                          borderRadius: const BorderRadius.only(
                            topRight: Radius.circular(20.0),
                            bottomRight: Radius.circular(20.0),
                          ),
                        ),
                        child: Text("确定(2000+件商品)",
                            style: setTextStyle(
                                10, FontWeight.w300, Tools.fromHex("#FFFFFF"))),
                      ),
                    )
                  ],
                ),
              )
            ],
          )),
    );
  }

  Widget choiseItem(int index) {
    return BaseInteractive(
      onClick: () {
        setState(() {
          widget.serverList[index]['selected'] =
              !widget.serverList[index]['selected'];
        });
      },
      childWidget: Container(
        margin: EdgeInsets.only(right: 10.w),
        padding: EdgeInsets.fromLTRB(25.w, 5.w, 25.w, 5.w),
        decoration: border_radis(
            widget.serverList[index]['selected'] == true
                ? Tools.fromHex("#F7D8D5")
                : Tools.fromHex("#F9F9F9"),
            borderColor: widget.serverList[index]['selected'] == true
                ? Tools.fromHex("#F83F2D")
                : Tools.fromHex("#F9F9F9")),
        child: Text(widget.serverList[index]['label'],
            style: widget.serverList[index]['selected'] == true
                ? setTextStyle(13, FontWeight.bold, Tools.fromHex("#F83F2D"))
                : setTextStyle(
                    13, FontWeight.normal, Tools.fromHex("#333333"))),
      ),
    );
  }
}

late OverlayEntry _overlayEntry;

//弹窗方法
void showFiltterPopup(context) {
  _overlayEntry = OverlayEntry(
    builder: (context) =>
        Positioned(top: 0, bottom: 0, right: 0, child: FiltterPopup()),
  );

  Overlay.of(context).insert(_overlayEntry);
}
